<template>
  <div class="add-live">
    <div class="content">
      <div class="top">
        <div class="title-wrapper">
          <div class="title">
            创建直播间
            <span class="red">(直播间内容创建后不可修改，请确认后再提交)</span>
          </div>
        </div>
      </div>
      <div class="content">
        <el-form ref="form" :model="form" :rules="rules" label-width="150px">
          <el-form-item label="直播类型">
            <div>
              <el-radio v-model="form.type" :label="0">手机直播</el-radio>
              <p class="tip">通过“小程序直播主播端小程序”发起直播</p>
            </div>
            <div>
              <el-radio v-model="form.type" :label="1">推流设备直播</el-radio>
              <p class="tip">通过第三方推流设备发起直播（仅当小程序直播组件版本在1.0.3或以上有效果）</p>
            </div>
            <div class="picture-Size">
              <div class="left">画面尺寸</div>
              <div class="right">
                <div>
                  <el-radio v-model="form.screenType" :label="1">横屏</el-radio>
                  <p class="tip">适用于以下宽高比的视频 16:9、4:3、1.85:1</p>
                </div>
                <div>
                  <el-radio v-model="form.screenType" :label="0">竖屏</el-radio>
                  <p class="tip">适用于以下宽高比的视频 9:16、2:3</p>
                </div>
              </div>
            </div>
          </el-form-item>
          <el-form-item prop="name" label="直播标题" style="width: 550px">
            <el-input v-model="form.name" placeholder="3-17个字" />
          </el-form-item>
          <el-form-item label="开播时间" prop="endTime">
            <el-date-picker
              v-model="value2"
              type="datetimerange"
              :picker-options="pickerOptions"
              range-separator="至"
              start-placeholder="开始日期"
              end-placeholder="结束日期"
              align="right"
              clearable
              value-format="yyyy-MM-dd HH:mm:ss"
              @change="pickerTimeChange"
            />
            <div class="tip" style="width: 400px; text-indent:0;line-height: 28px">
              注意：<br>1、直播计划开始时间，1.开播时间需在当前时间10min后，2.开始时间不能在6个月后,<br>
              2、直播计划结束时间，1.开播时间和结束时间间隔不得短于30min，不得超过12小时。<br>
              3、开播时间段仅供参考，不是实际直播间可以开播的时间。
              直播间在开始时间前也可以开播，并且到结束时间后不会强制结束。
              若到结束时间仍未开播，则直播间无法再开播。
            </div>
          </el-form-item>
          <el-form-item prop="anchorName" label="主播昵称" style="width: 550px">
            <el-input v-model="form.anchorName" placeholder="2-15个字" />
          </el-form-item>
          <el-form-item prop="anchorWechat" label="主播微信账号" style="width: 550px">
            <el-input v-model="form.anchorWechat" placeholder="请填写主播微信号" />
            <div
              class="tip"
              style="width: 400px; text-indent:0;line-height: 28px"
            >每个直播间需要绑定一个用作核实主播身份，不会展示给观众。</div>
          </el-form-item>
          <el-form-item prop="shareImg" label="分享卡片封面" style="width: 550px">
            <div class="tip" style="width: 400px; text-indent:0;line-height: 28px">
              观众在微信对话框内分享的直播间将以分享卡片的形式呈现。
              <br>建议尺寸：800像素 * 640像素
              <br>图片大小不得超过1M
            </div>
            <el-upload
              class="upload-demo"
              action="https://fengbao.zhixiu.vip/api/back/events/live?type=uploadfile"
              :on-preview="handleSharePreview"
              :on-remove="handleShareRemove"
              :before-upload="beforeShareUpload"
              :on-success="handleShareSuccess"
              :limit="1"
              name="files"
            >
              <el-button size="small" type="primary">点击上传</el-button>
            </el-upload>
            <el-dialog :visible.sync="shareDialogVisible">
              <img width="100%" :src="shareDialogImageUrl" alt>
            </el-dialog>
          </el-form-item>
          <el-form-item prop="coverImg" label="直播间背景墙" style="width: 550px">
            <div class="tip" style="width: 400px; text-indent:0;line-height: 28px">
              直播间背景墙是每个直播间的默认背景。
              <br>建议尺寸：1080像素 * 1920像素
              <br>图片大小不得超过2M
            </div>
            <el-upload
              class="upload-demo"
              action="https://fengbao.zhixiu.vip/api/back/events/live?type=uploadfile"
              :on-preview="handleCoverPreview"
              :on-remove="handleCoverRemove"
              :before-upload="beforeCoverUpload"
              :on-success="handleCoverSuccess"
              :limit="1"
              name="files"
            >
              <el-button size="small" type="primary">点击上传</el-button>
            </el-upload>
            <el-dialog :visible.sync="coverDialogVisible">
              <img width="100%" :src="coverDialogImageUrl" alt>
            </el-dialog>
          </el-form-item>
          <el-form-item label="直播间功能">
            <el-checkbox
              label="评论"
              true-label="0"
              false-label="1"
              checked
              @change="(val) => {handleCheckChange(val,'comment')}"
            />
            <el-checkbox
              checked
              label="点赞"
              true-label="0"
              false-label="1"
              @change="(val) => {handleCheckChange(val, 'like')}"
            />
            <el-checkbox
              checked
              label="商品货架"
              true-label="0"
              false-label="1"
              @change="(val) => {handleCheckChange(val, 'goods')}"
            />
          </el-form-item>
        </el-form>
      </div>
      <div class="submit">
        <el-button type="primary" @click="submit">创建直播间</el-button>
      </div>
    </div>
  </div>
</template>
<script>
import { createLiveRome } from '@/api/live'
const ERR_OK = 200
export default {
  data() {
    return {
      coverImgUrl: '',
      coverDialogVisible: false,
      coverDialogImageUrl: '',
      shareImgUrl: '',
      shareDialogVisible: false,
      shareDialogImageUrl: '',
      pickerOptions: {
        shortcuts: [
          {
            text: '最近一周',
            onClick(picker) {
              const end = new Date()
              const start = new Date()
              start.setTime(start.getTime() - 3600 * 1000 * 24 * 7)
              picker.$emit('pick', [start, end])
            }
          },
          {
            text: '最近一个月',
            onClick(picker) {
              const end = new Date()
              const start = new Date()
              start.setTime(start.getTime() - 3600 * 1000 * 24 * 30)
              picker.$emit('pick', [start, end])
            }
          },
          {
            text: '最近三个月',
            onClick(picker) {
              const end = new Date()
              const start = new Date()
              start.setTime(start.getTime() - 3600 * 1000 * 24 * 90)
              picker.$emit('pick', [start, end])
            }
          }
        ]
      },
      value2: '',
      fileList: [],
      // checkList: ['评论', '点赞', '商品货架'],
      form: {
        name: '',
        coverImg: '',
        startTime: '',
        endTime: '',
        anchorName: '',
        anchorWechat: '',
        shareImg: '',
        type: 0,
        screenType: 0,
        closeLike: 0,
        closeGoods: 0,
        closeComment: 0
      },
      rules: {
        startTime: [
          {
            required: true,
            message: '请选择开始时间',
            trigger: 'change'
          }
        ],
        endTime: [
          {
            required: true,
            message: '请选择结束时间',
            trigger: 'change'
          }
        ],
        name: [{ required: true, message: '请输入主播名称', trigger: 'blur' },
          { min: 3, max: 17, message: '长度在 3 到 17 个字符', trigger: 'blur' }],
        anchorWechat: [
          { required: true, message: '请输入主播微信账号', trigger: 'blur' }
        ],
        shareImg: [
          { required: true, message: '请上传分享卡片封面', trigger: 'change' }
        ],
        coverImg: [
          { required: true, message: '请上传直播背景墙', trigger: 'change' }
        ],
        anchorName: [
          { required: true, message: '请填写主播昵称', trigger: 'blur' },
          { min: 2, max: 15, message: '长度在 2 到 15 个字符', trigger: 'blur' }
        ]
      }
    }
  },
  methods: {
    pickerTimeChange(val) {
      if (val) {
        this.form.startTime = val[0]
        this.form.endTime = val[1]
      } else {
        this.form.startTime = ''
        this.form.endTime = ''
      }
    },
    beforeShareUpload(file) {
      const isLt1M = file.size / 1024 / 1024 < 1
      if (!isLt1M) {
        this.$message.error('上传头像图片大小不能超过 1MB!')
      }
      return isLt1M
    },
    handleShareSuccess(res, file) {
      this.shareImgUrl = URL.createObjectURL(file.raw)
      if (res.code === ERR_OK) {
        this.form.shareImg = res.data.media_id
      }
    },
    handleShareRemove(file, fileList) {
      this.form.shareImg = ''
      this.shareImgUrl = ''
    },
    handleSharePreview(file) {
      this.shareDialogImageUrl = this.shareImgUrl
      this.shareDialogVisible = true
    },
    handleCoverPreview() {
      this.coverDialogImageUrl = this.coverImgUrl
      this.coverDialogVisible = true
    },
    handleCoverRemove() {
      this.form.coverImg = ''
      this.coverImgUrl = ''
    },
    beforeCoverUpload(file) {
      const isLt2M = file.size / 1024 / 1024 < 2
      if (!isLt2M) {
        this.$message.error('上传头像图片大小不能超过 2MB!')
      }
      return isLt2M
    },
    handleCoverSuccess(res, file) {
      this.coverImgUrl = URL.createObjectURL(file.raw)
      if (res.code === ERR_OK) {
        this.form.coverImg = res.data.media_id
      }
    },
    handleCheckChange(val, type) {
      console.log(val)
      switch (type) {
        case 'comment':
          this.form.closeComment = val
          break
        case 'like':
          this.form.closeLike = val
          break
        case 'goods':
          this.form.closeGoods = val
          break
      }
    },
    submit() {
      this.$refs['form'].validate(valid => {
        if (valid) {
          this._createLiveRome(this.form)
            .then(() => {
              this.$message({
                message: '创建成功',
                showClose: true,
                type: 'success'
              })
            })
        }
      })
    },
    _createLiveRome({
      name,
      coverImg,
      startTime,
      endTime,
      anchorName,
      anchorWechat,
      shareImg,
      type,
      screenType,
      closeLike,
      closeGoods,
      closeComment
    }) {
      return createLiveRome({
        name,
        coverImg,
        startTime,
        endTime,
        anchorName,
        anchorWechat,
        shareImg,
        type,
        screenType,
        closeLike,
        closeGoods,
        closeComment
      })
        .then(res => {
          if (res.code === ERR_OK) {
            console.log(res)
            return Promise.resolve()
          }
        })
        .catch(err => {
          console.log(err)
        })
    }
  }
}
</script>
<style lang="scss" scoped>
.add-live {
  padding: 0 20px;
  box-sizing: border-box;
  min-height: 110vh;
  .top {
    width: 100%;
    box-sizing: border-box;
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 10px 0;
    .title-wrapper {
      display: flex;
      align-content: center;
      .title {
        height: 44px;
        line-height: 44px;
        color: rgba(68, 68, 68, 1);
        font-size: 18px;
        font-family: Roboto;
        font-weight: bold;
        cursor: pointer;
        span {
          font-size: 17px;
          font-weight: normal;
        }
      }
    }
  }
  .content {
    .picture-Size {
      width: 513px;
      height: 200px;
      line-height: 20px;
      background-color: rgba(248, 248, 248, 1);
      text-align: center;
      border: 1px solid rgba(255, 255, 255, 0);
      padding: 35px 45px;
      box-sizing: border-box;
      display: flex;
      justify-content: space-between;
      align-items: center;
      .left {
        height: 100%;
      }
      .right {
        height: 100%;
        text-align: left;
      }
    }
  }
  .submit {
    margin-left: 150px;
    padding: 20px 0 50px 0;
  }
}
.red {
  color: red;
}
.tip {
  color: rgba(153, 153, 153, 1);
  font-size: 14px;
  line-height: 22px;
  text-align: left;
  font-family: SourceHanSansSC-regular;
  text-indent: 25px;
}
</style>
